<template>
  <div class="results-analysis">
    <h2>成绩分析</h2>
    <div class="filters">
      <select v-model="selectedExam">
        <option value="">所有考试</option>
        <option v-for="exam in exams" :key="exam.id" :value="exam.id">{{ exam.name }}</option>
      </select>
    </div>
    <table>
      <thead>
        <tr>
          <th>学生</th>
          <th>考试</th>
          <th>得分</th>
          <th>百分比</th>
          <th>排名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="result in filteredResults" :key="result.id">
          <td>{{ result.studentName }}</td>
          <td>{{ result.examName }}</td>
          <td>{{ result.score }}</td>
          <td>{{ (result.score / result.totalScore * 100).toFixed(2) }}%</td>
          <td>{{ result.rank }}</td>
        </tr>
      </tbody>
    </table>
    <div class="charts">
      <div class="chart">
        <h3>成绩分布</h3>
        <canvas ref="scoreDistributionChart"></canvas>
      </div>
      <div class="chart">
        <h3>平均分趋势</h3>
        <canvas ref="averageScoreTrendChart"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import Chart from 'chart.js/auto'

// 写死的考试数据
const exams = ref([
  { id: 1, name: '期中考试' },
  { id: 2, name: '期末考试' }
])

// 写死的成绩数据
const results = ref([
  { id: 1, studentName: '张三', examId: 1, examName: '期中考试', score: 85, totalScore: 100, rank: 1 },
  { id: 2, studentName: '李四', examId: 1, examName: '期中考试', score: 78, totalScore: 100, rank: 2 },
  { id: 3, studentName: '王五', examId: 1, examName: '期中考试', score: 60, totalScore: 100, rank: 3 },
  { id: 4, studentName: '赵六', examId: 2, examName: '期末考试', score: 92, totalScore: 100, rank: 1 },
  { id: 5, studentName: '孙七', examId: 2, examName: '期末考试', score: 88, totalScore: 100, rank: 2 }
])

// 当前选中的考试
const selectedExam = ref('')

// 根据选中的考试过滤结果
const filteredResults = computed(() => {
  return selectedExam.value
    ? results.value.filter(r => r.examId === parseInt(selectedExam.value))
    : results.value
})

// 图表引用
const scoreDistributionChart = ref(null)
const averageScoreTrendChart = ref(null)

onMounted(() => {
  // 成绩分布图表
  new Chart(scoreDistributionChart.value, {
    type: 'bar',
    data: {
      labels: ['0-20', '21-40', '41-60', '61-80', '81-100'],
      datasets: [{
        label: '学生数量',
        data: [0, 0, 1, 2, 2], // 写死的分布数据
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })

  // 平均分趋势图表
  new Chart(averageScoreTrendChart.value, {
    type: 'line',
    data: {
      labels: ['期中考试', '期末考试'],
      datasets: [{
        label: '平均分',
        data: [77.67, 90], // 写死的平均分数据
        borderColor: 'rgba(75, 192, 192, 1)',
        tension: 0.1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
          max: 100
        }
      }
    }
  })
})
</script>

<style scoped>
.results-analysis {
  padding: 1rem;
}

.filters {
  margin-bottom: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
}

th {
  background-color: #f0f2f5;
  font-weight: bold;
}

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.chart {
  background-color: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>

